<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="ISO-8859-1">
        <title>My Diagram</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            body {
                background: #ffffff;
                margin: 0;
                padding: 0;
            }
            #panel {
                position: absolute;
                left: 600px;
                top: 0px;
                clear: none;
                padding: 6px;
                padding-top: 4px;
                padding-bottom: 4px;
                margin-left: 2px;
                border-radius: 8px;
                background: #333333;
                width: auto;
                height: auto;
            }
            #canvas {
                position: relative;
                left: 0px;
                top: 0px;
                width: 600px;
                height: 400px;
                background: #005;
                border-radius: 8px;
            }
            [contenteditable="true"]:hover {
                outline: 2px dashed #0090D2;
            }
        </style>
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script type="text/javascript" src="oCanvas.js"></script>
        <script type="text/javascript" src="jscolor.js"></script>
        <script type="text/javascript" src="tiny_mce.js"></script>
        <script type="text/javascript" src="diagram.js"></script>
        <script type="text/javascript">
            var colorPicker = new jscolor.color(document.getElementById('myColor'), {});
            var colorPicker2 = new jscolor.color(document.getElementById('lineColor'), {});
        </script>
        <script type="text/javascript">
            /*function Show_editor()
{
	document.getElementById("tinyeditor").style.display="block";
tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",
    plugins : "autolink,lists,style,layer,table,save,advhr,advimage,advlink,inlinepopups",
    
    save_onsavecallback : "UpdateNodeText",
    
    // Theme options
    theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,fontselect",
    theme_advanced_buttons2 : "justifyleft,justifycenter,justifyright,justifyfull,|,fontsizeselect,formatselect",
    theme_advanced_buttons3 : "bullist,numlist,|,link,unlink,image,code,|,forecolor,backcolor",
    
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
    width: "50",
    height: "100"
});

tinyMCE.get('tinyeditor').setContent("");
}*/
        </script>
    </head>
    
    <body onload="init();">
        <div>
            <canvas id="canvas"></canvas>
        </div>
        <input type="hidden" class="color {pickerPosition:'right', pickerClosable:true, styleElement:'mycolorStyle'}"
        id="myColor" onchange="document.getElementById('colorsButton').style.backgroundColor = '#'+this.color; fill_color='#'+this.color; UpdatefillColor();">
        <input type="hidden" class="color {pickerPosition:'right', pickerClosable:true, styleElement:'linecolorStyle'}"
        id="lineColor" onchange="document.getElementById('bordercolorButton').style.backgroundColor = '#'+this.color; border_color='#'+this.color; ">
        <div id="panel">
            <table>
                <tr>
                    <td>
                        <input type="button" value="    Fill   " onclick="document.getElementById('myColor').color.showPicker()"
                        id="colorsButton" style="" />
                        <input type="button" value="  Border  " onclick="document.getElementById('lineColor').color.showPicker()"
                        id="bordercolorButton" style="" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <img id="rect" src="rect.png" title="Click on the canvas to add a rectangular node"
                        onclick="DrawRect();" border="1px" alt="" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <img id="text" src="text.png" title="Click in a node to add your text"
                        onclick="texteditor=0; if(selected_indx !=-1) UpdateNodeText();
			                    else alert('Please select a node first to add the text to.');"
                        border="1px" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <img id="arrow" src="arrow.png" title="Draw an arrow then you can drag and drop its endpoints to the parent and child nodes"
                        onclick="DrawArrow();" border="1px" alt="" />
                    </td>
                </tr>
                <tr></tr>
                <tr>
                    <td style="color: white">Mouse Position:
                        <input type="text" id="mouse" value="X:	Y: " maxlength="300"
                        disabled="disabled" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <textarea id="tinyeditor" style="width: 50px; height: 100px; display: none;"
                        cols="" rows=""></textarea>
                    </td>
                </tr>
            </table>
        </div>
        <!-- <div style="position: absolute; top: 50px; left: 50px; width: 100px;
        height: 100px; z-index: 5;" class="draggable" class="ui-widget-content">
   <textarea class="resizable" rows="2" cols="10" style="color: #FF0707; ">
      Example
   </textarea>
</div>-->
    </body>

</html>